<template>
  <div>
    <con-title :topTitle="topTitle" />
    <el-card class="box-card">
      <el-table :data="measurementList" style="width: 100%">
        <el-table-column type="index" label="序号" width="100">
        </el-table-column>

        <el-table-column prop="id" label="测量ID" width="180">
        </el-table-column>
        <el-table-column prop="name" label="测量名称" width="180">
        </el-table-column>
        <el-table-column prop="unit" label="测量单位"> </el-table-column>
        <el-table-column label="创建时间">
          <template slot-scope="scope">
            {{ scope.row.cTime | Btime }}
          </template>
        </el-table-column>
        <el-table-column label="更新时间">
          <template slot-scope="scope">
            {{ scope.row.uTime | Btime }}
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template #default="scope">
            <el-button type="text" size="small" @click="showDialog(scope.row.id, scope.row.groupName)">重命名</el-button>
            <el-button type="text" size="small" @click="delGroup(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 弹窗 -->
      <el-dialog :title="editId == '' ? '添加群组信息' : '修改群组信息'" :visible.sync="dialogVisible" width="30%">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="群组名称" prop="name">
            <el-input type="input" v-model="ruleForm.name" placeholder="请输入群组名称"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="handleOK">确 定</el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import { $meaList, $meaEdit, $meaAdd, $meaDel } from "@/api";
import ConTitle from "@/components/ConTitle.vue";

export default {
  components: { ConTitle },
  name: "MeasurementList",
  data() {
    return {
      topTitle: {
        type: "自定义类型",
        text: "测量类型",
        msg: "展示——————————————————————",
      },
      measurementList: [],
      dialogVisible: false, //弹窗是否显示
      ruleForm: {
        name: "",
      }, //需要提交的表单项
      rules: {
        name: [
          { required: true, message: "请输入群组名称", trigger: "blur" },
        ],
      }, //需要验证的表单项
      editId: "", //修改的id   为空 就是添加  ，有值 就是修改
    };
  },
  mounted() {
    this.getmeslist();
  },
  methods: {
    getmeslist() {
      $meaList().then((res) => {
        console.log(res);
        this.measurementList = res.data.data;
      });
    },
    handleAdd() {
      this.dialogVisible = true;
      this.editId = "";
      this.ruleForm.groupName = "";
    },
    // 点击 弹窗的确定按钮触发的函数
    handleOK() {
      console.log("弹窗需要关闭，添加一条记录");
      //验证 表单的input框是否添加了数据
      this.$refs.ruleForm.validate((valid) => {
        console.log(valid);
        if (valid) {
          console.log("验证成功");
          if (this.editId !== "") {
            //修改
            this.editItem();
          } else {
            //添加
            this.addItem();
          }
        } else {
          console.log("error");
          return false;
        }
      });
    },
    //添加
    addItem() {
      //2.调用添加接口
      $meaAdd({ name: this.ruleForm.name }).then((res) => {
        console.log(res);
        if (res.data.msg == "success") {
          //成功添加
          //1.关闭弹窗
          this.dialogVisible = false;
          this.getmeslist();
        }
      });
    },
    //修改  $groupEdit
    editItem() {
      $meaEdit({ id: this.editId, name: this.ruleForm.name }).then(
        (res) => {
          console.log(res);
          if (res.data.msg == "success") {
            //成功添加
            //1.关闭弹窗
            this.dialogVisible = false;
            this.getmeslist();
          }
        }
      );
    },

    //显示一下修改页面
    showDialog(id, groupName) {
      this.dialogVisible = true;
      //给文本框赋值
      this.ruleForm.groupName = groupName;
      this.editId = id;
    },
    delGroup(id) {
      this.$confirm("此操作将永久删除该条记录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          $meaDel({ id: id }).then((res) => {
            console.log(res);
            if (res.data.msg == "success") {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              //重新获取数据
              this.getmeslist();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

  },
  filters: {
    Btime(val) {
      let d = new Date(+val);
      return (
        d.getFullYear() + "年" + (d.getMonth() + 1) + "月" + d.getDate() + "日"
      );
    },
  },
};
</script>

<style lang='scss' scoped>
.box-card {
  margin: 10px;
}
</style>